<template>
    <div class="new-layout">
      <div class="search" v-if="isSearch">
        <dialog-search-view @callback="onSearch"/>
        <ul class="list-layout">
          <li class="item" v-for="(d,index) in searchList" :key="index" @click="toInfoView(d)">
            <div class="item-title">{{d.name.replace('.' + d.suffix, '')}}</div>
            <div class="item-content">{{d.content}}</div>
            <div class="desc">
              发布人: <span style="margin-right: 10px;">{{d.creater}}</span> 项目: <span style="margin-right: 10px;">{{d.projectName}}</span><span>{{d.createTime}}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="new" v-else>
        <header-view>
          <div class="icon"></div>
          <div class="title">最新</div>
          <img src="../../assets/image/search.png" alt="" class="icon" @click.stop="isSearch = true">
        </header-view>
        <div class="content">
          <ul class="list-layout">
            <li class="item" v-for="(d,index) in newList" :key="index" @click="toInfoView(d)">
              <div class="item-title">{{d.name.replace('.' + d.suffix, '')}}</div>
              <div class="item-content">{{d.content}}</div>
              <div class="desc">
                发布人: <span style="margin-right: 10px;">{{d.creater}}</span> 项目: <span style="margin-right: 10px;">{{d.projectName}}</span><span>{{d.createTime}}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>
    import DialogSearchView from '../common/SearchView';
    import HeaderView from '../common/HeaderView';

    import { getNewList } from '../../api/file'

    export default {
        name: 'New',
        components: { HeaderView, DialogSearchView },
        // components: { DialogDropView, HeaderView },
        mounted() {
            document.addEventListener('click', () => {
                if(this.isShowDrop)
                    this.isShowDrop = false;
                if(this.isSearch)
                    this.isSearch = false;
            });
            this.getNewList(this.searchName)
        },
        data() {
            return {
                dropMenu: this.global.dropMenu,
                newList: [],
                sortTitle: '按更新时间排序',
                isShowDrop: false,
                isSearch: false,
                searchName: '',
                searchList: [],
                searchType: 'file'
            }
        },
        methods: {
            getNewList(name) {
                getNewList(name)
                    .then(result => {
                        // console.log(result)
                        const { data } = result;
                        this.newList = data;
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            toInfoView(d) {
                this.$router.push({name: 'fileContent', params: {info: d, type: 'file'}})
            },
            onSearch(name) {
                // this.getNewList(name);
              getNewList(name)
                  .then(result => {
                    // console.log(result)
                    const { data } = result;
                    this.searchList = data;
                  })
                  .catch(err => {
                    console.log(err)
                  })
              // this.$router.push({name: 'search', params: {type: 'new', fun: this.getNewList}})
            },
        }
    }
</script>

<style scoped>
    @import '../../assets/css/index.css';
    .new-layout {

    }
    .title {
        flex: 1;
    }

    .content {
        background: #F5F8FB;
        min-height: 80vh;
        margin-top: 135px;
        padding-bottom: 110px;
    }
    .sort {
        height: 70px;
        background: #fff;
        padding: 0 40px;
        text-align: center;
        display: flex;
        align-items: center;
        margin-bottom: 6px;
        position: relative;
    }
    .sort-title {
        font-size: 24px;
        color: #484848;
        opacity: .8;
        margin-left: 20px;
    }

    .list-layout {
        padding: 20px 16px;
    }

    .list-layout .item {
        background: #fff;
        border-radius: 30px;
        box-shadow: 1px 6px 9px 0px rgba(0, 121, 255, 0.05);
        margin-bottom: 6px;
        padding: 30px 20px;
        text-align: left;
    }

    .item .item-title {
        font-size: 26px;
        color: #191919;
    }

    .item .item-content {
        font-size: 24px;
        color: #959595;
        margin: 30px 0;
    }

    .item .desc {
        font-size: 18px;
        color: #C8C8C8;
    }
    .drop-layout {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0,0,0,.3);
    }


</style>
